{% load i18n %}
<div class="company-setting-form">
  <form action="" id="id_companySettingForm" class="layui-form" lay-filter="companySettingForm">
    {% csrf_token %}
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header"><i class="fa fa-file-image-o"></i><span
                  style="padding-left: 5px">{% trans 'companySettingPage_label_logoReview' %}</span></div>
          <div class="layui-card-body" style="padding: 10px 0 0 60px">
            <div class="layui-upload" style="width: 200px">
              <div class="layui-upload-list">
                <img class="layui-upload-img" id="idLogoPanel">
                <input type="hidden" name="logo_img" id="idLogoImg">
                <p style="text-align: center;color: darkorange">{% trans 'companySettingPage_size_200x75' %}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header"><i class="fa fa-list-alt"></i><span
                  style="padding-left: 5px">{% trans 'companySettingPage_label_companySetting' %}</span></div>
          <div class="layui-card-body" style="padding-top:10px;height: 150px;">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label for="id_log_position" class="layui-form-label"
                       style="width: 150px">{% trans 'companySettingPage_label_companyLogo' %}</label>
                <div class="layui-input-inline">
                  <input id="idLogoUpload" type="text" class="layui-input" readonly="readonly"
                         placeholder="{% trans 'companySettingPage_placeholder_upload' %}"/>
                </div>
              </div>
              <div class="layui-inline">
                <label for="id_log_position" class="layui-form-label"
                       style="width: 150px">{% trans 'companySettingPage_label_logoDisplay' %}</label>
                <div class="layui-input-inline">
                  <select name="logo_pos" id="id_log_position" class="layui-input">
                    <option value="0">{% trans 'companySettingPage_posOption_notDisplay' %}</option>
                    <option value="1">{% trans 'companySettingPage_posOption_left' %}</option>
                    <option value="2">{% trans 'companySettingPage_posOption_center' %}</option>
                    <option value="3">{% trans 'companySettingPage_posOption_right' %}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label for="id_company_name" class="layui-form-label"
                       style="width: 150px">{% trans 'companySettingPage_label_companyName' %}</label>
                <div class="layui-input-inline">
                  <input type="text" id="id_company_name" name="company_name" autocomplete="off" placeholder=""
                         class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <label for="id_company_name" class="layui-form-label"
                       style="width: 150px">{% trans 'companySettingPage_label_companyNameDisplay' %}</label>
                <div class="layui-input-inline">
                  <select name="name_pos" id="id_company_position" class="layui-input">
                    <option value="0">{% trans 'companySettingPage_posOption_notDisplay' %}</option>
                    <option value="1">{% trans 'companySettingPage_posOption_left' %}</option>
                    <option value="2">{% trans 'companySettingPage_posOption_center' %}</option>
                    <option value="3">{% trans 'companySettingPage_posOption_right' %}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" id="companySubmit" lay-submit=""
                  lay-filter="companySubmit">{% trans 'companySettingPage_btn_submit' %}</button>
        </div>
      </div>
    </div>
  </form>
</div>
<script>
    layui.use(['form', 'upload'], function () {
        var form = layui.form, $ = layui.jquery , upload = layui.upload;
        form.render();
        upload.render({
            elem: '#idLogoUpload'
            , choose: function (obj) {
                //not support ie8
                obj.preview(function (index, file, result) {
                    var img = new Image();
                    img.src = result;
                    img.onload = function () {
                        if (img.width === 200 && img.height === 75) {
                            $('#idLogoPanel').attr('src', result); //base64
                            $('#idLogoImg').val(result)
                        } else {
                            layer.msg(gettext('action_notification_failed'), {icon: 5});
                            return false;
                        }
                    };
                });
            }
            , auto: false
        });
        form.on('submit(companySubmit)', function (data) {
            var csrf = data.field['csrfmiddlewaretoken'];
            var value = {
                company_name: data.field['company_name']
                , name_pos: data.field['name_pos']
                , logo_pos: data.field['logo_pos']
                , logo_img: data.field['logo_img']
            };
            var loadIndex = layer.load();
            $.ajax({
                url: "/base/api/systemSetting/"
                , type: "POST"
                , data: {'name': 'company_setting', value: JSON.stringify(value), csrfmiddlewaretoken: csrf}
                , dataType: "json"
                , success: function (response, xhr) {
                    layer.close(loadIndex);
                    layer.msg(gettext('action_notification_successful'), {icon: 6});
                }
                , error: function (xhr, error, e) {
                    layer.close(loadIndex);
                    if (xhr.responseJSON.value) {
                        layer.msg(gettext(xhr.responseJSON.value[0]), {icon: 5});
                    } else {
                        layer.msg(gettext('action_notification_failed'), {icon: 5});
                    }
                }
            });
            return false
        });
        $.ajax({
            url: "/base/api/systemSetting/?name=company_setting"
            , type: "GET"
            , dataType: "json"
            , success: function (response, xhr) {
                var val = response.data[0];
                if (val) {
                    var val_dict = JSON.parse(val.value);
                    form.val('companySettingForm', val_dict);
                    $('#idLogoPanel').attr('src', val_dict['logo_img']);
                    $('#idLogoImg').attr('src', val_dict['logo_img']);
                }
            }
            , error: function (xhr, error, e) {

            }
        });
    })
</script>